<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>博客管理</title>
    <link rel="icon" href="/images/logo.ico"/>
    <link rel="stylesheet" href="/lib/semantic/semantic.min.css">
    <link rel="stylesheet" href="/css/me.css">
    <link rel="stylesheet" href="/lib/animate/animate.min.css">
    <link rel="stylesheet" href="/css/style.css">
</head>
<body class="m-back-img1">
<!--导航-->
<nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small animated fadeInDown m-opacity"
     style="z-index: 99 !important;">
    <div class="ui container">
        <div class="ui inverted secondary stackable  menu">  <!--stackable 可堆叠的 应用在移动端-->
            <h2 class="ui teal header item">后台管理</h2>
            <a href="/" class=" nav_item item m-mobile-hide"><i class="coffee icon"></i>博客首页</a>
            <a href="/back/index.html" class=" nav_item item m-mobile-hide "><i class="home icon"></i>管理首页</a>
            <a href="/back/blogs.html" class=" nav_item item m-mobile-hide"><i class="book icon"></i>博客</a>
            <a href="/back/types.html" class="nav_item item m-mobile-hide"><i class="idea icon"></i>分类</a>
            <a href="/back/tags.html" class="nav_item item m-mobile-hide"><i class="tags icon"></i>标签</a>
            <div class="nav_item right dropdown  menu m-mobile-hide">
                <div class="ui dropdown item">
                    <div class="text">
                        <img id="avatar" class="ui avatar image" src="/images/avatar/zry.jpg" alt="">
                        <span id="nickname">猫喵喵</span>
                    </div>

                    <i class="dropdown icon"></i>
                    <div class="menu element-ui dialog" style="z-index: 999 !important;">
                        <a href="/back/user.html" class="item">个人信息</a>
                        <a onclick="logout()" class="item">注销</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a href="#" id="menu_toggle" class="ui black button m-mobile-show m-top-right ">
        <i class="sidebar icon"></i>
    </a>
</nav>

<!--top attached 完整拼接成一个相连区域 bottom attached-->
<!--中间内容-->
<div class="m-padded-tb-4em m-container-small ">
    <div class="ui container">
        <div class="ui secondary segment form">
            <input type="hidden" name="pageInfo">
            <input type="hidden" name="UserId">
            <div class="inline fields">
                <div class="field">
                    <input type="text" name="title" placeholder="标题">
                </div>
                <div class="field">
                    <div class="ui selection dropdown ">
                        <input type="hidden" name="typeId">
                        <i class="dropdown icon"></i>
                        <div class="default text">分类</div>
                        <div id="typeContent" class="menu">
                            <div class="item" data-value="0">全部</div>
                            <!-- 分类列表 -->
                        </div>
                    </div>
                </div>
                <div class="field">
                    <div class="ui toggle checkbox">
                        <input id="published" type="checkbox"  name="published" tabindex="0" class="hidden">
                        <label for="published">已发布</label>
                    </div>
                </div>
                <div class="field">
                    <button type="button" id="search-btn" class="ui mini teal basic button"><i class="search icon"></i>搜索
                    </button>
                </div>
            </div>
        </div>
        <!--        加一个celled 网格-->
        <div id="table-container">
            <table th:fragment="blogList" class="ui compact teal table">
                <thead>
                <tr>
                    <th></th>
                    <th>标题</th>
                    <th>类型</th>
                    <th>推荐</th>
                    <th>状态</th>
                    <th>更新时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="blogContent">
                <tr>
                    <td th:text="${blogStat.count}">1</td>
                    <td th:text="${blog.title}">刻苦练习</td>
                    <td th:text="${blog.type.name}">认知升级</td>
                    <td th:text="${blog.recommend} ? '是' : '否'">是</td>
                    <td th:text="${blog.published} ? '发布' : '草稿'">是</td>
                    <td th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd HH:mm')}">2021-10-02 09:45</td>
                    <td>
                        <!-- 内容 -->
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <th colspan="7" class=" center aligned ">
                        <div id="pageLR" class="ui pagination  mini menu">
                            <!-- 内容 -->
                        </div>
                        <a href="/back/blog-input.html"
                           class="ui mini right floated teal basic button">新增</a>
                    </th>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
<br>
<!--弹出框-->
<div class="ui container">
    <div class="ui modal">
        <div class="header title">确定删除吗？</div>
        <div class="content">
            确定删除这个博客吗？
        </div>
        <div class="actions">
            <button class="ui negative button">否</button>
            <button class="ui positive button">是</button>
        </div>
    </div>
</div>
<br>
<!--底部footer-->
<footer class="ui inverted vertical segment m-padded-tb-massive">
    <!--    居中-->
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../../images/weixin.png"
                             class="ui rounded image" alt="" width="110px">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <div class="three wide column">
                    <h4 class="ui inverted header">推荐博客</h4>
                    <div id="recommends" class="ui inverted link list m-text-thin m-text-spaced">
                        <a href="#" class="item">用户故事</a>
                        <a href="#" class="item">用户故事</a>
                        <a href="#" class="item">用户故事</a>
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">联系我</h4>
                <div class="ui inverted link list m-text-thin m-text-spaced">
                    <a href="#" class="item">Email：123456@qq.com</a>
                    <a href="#" class="item">QQ:123456789</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header">Blog</h4>
                <p class="m-text-thin m-text-spaced m-opacity">
                    这厮我的个人博客，会分享关于编程，思考，随笔相关的内容，欢迎大家访问，希望可以给到这的人有所帮助...
                </p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2021-2022 . All rights reserved.</p>
        <div>
            <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode="
               style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img
                    src="https://beian.mps.gov.cn/favicon.ico" style="float:left;">
                <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#ff1c04;">京ICP备
                    XXXXXXXXXX号</p></a>
        </div>
    </div>
</footer>
</body>
<!-- jquery -->
<script src="/js/jquery-3.6.0.min.js"></script>
<!-- layer -->
<script type="text/javascript" src="/lib/layer/layer.js"></script>
<!-- semantic-ui-->
<script type="text/javascript" src="/lib/semantic/semantic.min.js"></script>
<!--comment.js-->
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript">
    $(function () {
        getUserInfo();
        init();
        getPage(1);
    });
    $(".ui.dropdown").dropdown({
        on: "hover"
    });

    function init() {
        $.ajax({
            url: "/types",
            type: "GET",
            success: function (result) {
                layer.closeAll();
                if (result.code === 200) {
                    var typeContent = '<div  class="item" className="' + 'item" data-value="' + '">全部</div>';
                    $.each(result.data, function (index, val) {
                        typeContent +=
                            '<div class="item" data-value="'
                            + val.id
                            + '" text="'
                            + val.name
                            + '"> ' + val.name + '</div>';
                    });
                    $('#typeContent').html(typeContent);
                } else {
                    layer.msg(result.msg);
                }
            },
            error: function (obj) {
                layer.closeAll();
                layer.log("error，也许您的网络有问题");
            }
        });

    };

    function getPage(pageNum) {
        //    获取本文分页
        queryData = {
            typeId: $("[name='typeId']").val(),
            title: $("[name='title']").val(),
            published: $("[ name='published']").prop('checked')
        };
        $.ajax({
            url: "/admin/blogs?pageNum=" + pageNum + "&pageSize=6",
            type: "GET",
            data: queryData,
            success: function (result) {
                layer.closeAll();
                if (result.code === 200) {
                    setPage(result.data);
                }
                layer.msg(result.msg);
            },
            error: function (obj) {
                layer.closeAll();
                layer.log("error，也许您的网络有问题");
            }

        });

        function setPage(obj) {
            //每页的大小
            var pageSiz = obj.size;
            //数据
            var blogs = obj.records;
            //数据总数
            var total = obj.total;
            //计算当前页的数据量
            console.log(blogs.length);
            //当前页
            var current = obj.current;
            //总页数
            var pages = obj.pages;

            var blogContent = "";
            $.each(blogs, function (index, val) {
                let i = index + 1;
                let recommend = val.recommend ? "是" : "否";
                let published = val.published ? "发布" : "草稿";
                let typeName = val.type == null ? "" : val.type.name;
                blogContent += '<tr class="blogLine'
                    + val.id
                    + '"><td>'
                    + i
                    + '</td><td> '
                    + val.title
                    + '</td><td>'
                    + typeName
                    + '</td> <td> '
                    + recommend
                    + '</td><td> '
                    + published
                    + '</td> <td>'
                    + val.updateTime
                    + '</td><td>' + '<a href="/back/blog-input.html?blogId='
                    + val.id
                    + '" class= "ui mini teal basic button m-margin-tb-tiny" > 编辑 </a>' +
                    ' <a href="javascript:void(0);" onclick="go('
                    + val.id
                    + ')" class="ui mini red basic button m-margin-tb-tiny">删除</a></td></tr>';
            });
            $('#blogContent').html(blogContent);

            var page_LR = "";
            if (current === 1) {
                page_LR = '<a onClick="getPage('
                    + (current + 1)
                    + ')" class="icon item" >'
                    + '<i class="right chevron icon"></i></a>';
            } else if (current === pages) {
                page_LR = '<a onClick="getPage('
                    + (current - 1)
                    + ') " class="icon item">'
                    + '<i class="left chevron icon"></i>'
                    + '</a>';
            } else if (1 < current && current < pages) {
                page_LR = '<a onClick="getPage('
                    + (current - 1)
                    + ')" class="icon item">'
                    + '<i class="left chevron icon"></i>'
                    + '</a><a onClick="getPage('
                    + (current + 1)
                    + ')" class="icon item" >'
                    + '<i class="right chevron icon"></i></a>';
            }
            if (1 >= pages) {
                page_LR = "";
            }
            $('#pageLR').html(page_LR);
        };
    }


    $("#search-btn").click(function () {
        getPage(1);
    });

    /*!!!!二次确认提示框!!!*/
    function go(id) {
        let url = "/admin/blogs/" + id;
        $(".ui.modal").modal({ //各种回调方法
            onApprove: function () { //单击确认按钮
                $.ajax({
                    url: url,
                    type: "DELETE",
                    async: false,
                    success: function (result) {
                        layer.closeAll();
                        if (result.code === 204) {
                            $('.blogLine' + id).toggleClass("no");
                        }
                        layer.msg(result.msg);
                    },
                    error: function (obj) {
                        layer.closeAll();
                        layer.log("error，也许您的网络有问题");
                    }
                });
            },
            onDeny: function () {  //单击取消按钮
                console.log("拒绝")
            }
        }).modal("show");
        return false;
    };
</script>

</html>